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Introduction 


Flutter is an open-source UI software development kit created by Google. It 
is used to develop applications for Android, iOS, Windows, Mac, Linux, 
Google Fuchsia and the web. 


Flutter is Google's mobile UI framework that can quickly build high-quality 
native user interfaces on iOS and Android. Flutter works with existing code. 
Flutter is being used by more and more developers and organizations 
around the world, and Flutter is completely free and open source . At 
present, some modules of the company are developed using Flutter 


The major components of Flutter include: 


Dart platform 

Flutter engine 
Foundation library 
Design-specific widgets 


Dart Platform 
Flutter apps are written in the Dart language and make use of many of the 


language's more advanced features 


You can refer Dart Language at Dart 


Flutter Installation 


Flutter is supporting HybridApp development on different Os. 
To set up the flutter on each individual os by this Flutter official Tutorial 


In this section we will learn how to install Flutter SDK in Windows system. 
Step 1: Download Flutter SDK from Official website The Latest version is 
1.12 

Step 2: Unzip and archive file in specific folder, like c:\flutter\ 


Step 3: Update the system path to include flutter bin directory 
Step 4: Open terminal and move to installed directory and run 


flutter doctor 


flutter doctor is tool to check all requirements for the flutter is installed 
or not and show the details 


The result of the above command will give you 


Doctor summary (to see all details, run flutter doctor -v): 

[V] Flutter (Channel master, v1.14.6-pre.51, on Microsoft Windows 
[Version 6.3.9600], locale en-IN) 

[V] Android toolchain - develop for Android devices (Android SDK 


version 28.0.3) 

[V] Chrome - develop for the web 
[V] Android Studio (version 3.3) 
[!] Android Studio (version 3.4) 





X Flutter plugin not installed; this adds Flutter specific 
functionality. 
X Dart plugin not installed; this adds Dart specific functionality. 


[V] Connected device (2 available) 





! Doctor found issues in 1 category. 


Step 5: Install Android Studio 
Step 6: Check Latest Android SDK installed or not, if not install it 
Step 7: Open Android studio and install Dart and Flutter Plugins for 
Android studio. 

e Click File > Settings > Plugins. 

e Select the Flutter plugin and click Install. 

e Click Yes when prompted to install the Dart plugin. 

e Restart Android studio 

Flutter — Creating Simple Application in Android Studio 


Now Open File -> Create new Flutter Project 






Edit View Navigate Code Analyze Refactor Build Run Tools VCS Wir 


New Project... 
[E Profile or Debug APK... Import Project... 
Open Recent b Project from Version Control b 
Close Project New Module... 
# Settings... Ctrl+Alt+S Import Module... 
Other Settings > © Java Class 
Import Settings... r Kotlin File/Class 
Export Settings... = File 
Settings Repository... =» Scratch File Ctrl+Alt+Shift+Insert 
Export to Zip File... Package 


It will prompt below screen 


New Flutter Project 


BK Android Studio 


« K 


A Ea tei Flutter Plugin Flutter Package 


Select an "Application" when building for end users. 
Select a "Plugin" when exposing an Android or iOS API for developers. 
Select a “Package” when creating a pure Dart component, like a new Widget 


Select a "Module" when creating a Flutter component to add to an Android or iOS app. 





Select Flutter application and press Next 


Now it will ask below details 


New Flutter Application 


f 4 Android Studio 


Configure the new Flutter application 


Project name 
flutter_app] 


Flutter SDK path 


D:\Flutter\flutter m | & Install SDK... 
Project location 


D:\Blog Notes\Flutter\Workspace\flutter_screen_animations 


Anew Flutter application. 


C] Create project offline 


À project location should not contain whitespace, as this can cause problems with the NDK tools. 


Previous Cancel 





Enter your Project Name 

Set Flutter SDk path (It is installation path) 
Set the Project Location 

Press Next Button 


Enter Domain name and Press Finish 
Now it will create a project with auto generated code 
Now connect real device/Emulator and run the application 


The output will be like this 


Flutter Demo Home Page 


You have pushed the button this many times: 


0 








Application Folder Structure 


To understand flutter fully we need to understand the first Flutter folder 
structure. 


android - Auto generated source code to create android application 
ios - Auto generated source code to create ios application 

web- Auto generated source code to create web application 
lib - Main folder containing Dart code written using flutter 
framework 

lib/main.dart - Entry point of the Flutter application 

test - Folder containing Dart code to test the flutter application 
test/widget_test.dart - Sample code 

-gitignore - Git version control file 

-metadata - auto generated by the flutter tools 

-_packages - auto generated to track the flutter packages 

-iml - project file used by Android studio 

pubspec.yaml - Used by Pub, Flutter package manager 
pubspec.lock - Auto generated by the Flutter package manager, 
Pub 

README. md - Project description file written in Markdown format 


BLoC 


Flutter, however, brings a new reactive style that is not entirely compatible 
with MVC. Its design idea is to separate data from views, and render views 
by data mapping 


A variation of this classical pattern has emerged from the Flutter 
community — BLoC 


What is BLoC? 


BLoC stands for Business Logic Components, BLoC is a method of building 
applications using reactive programming. This is a completely 
asynchronous world composed of streams 


e Wrap stateful components with StreamBuilder, streambuilder will listen for a 
stream 
This stream comes from BLoC 
The data in the stateful widget comes from the listening stream. 
User interaction gestures are detected and events are generated. For example, 
press the button. 
Call the function of bloc to handle this event 
After processing in bloc, the latest data will be added to the sink of the stream. 
StreamBuilder listens to new data, generates a new snapshot, and calls the build 
method again 

e Widget is rebuilt 


Example 


Here we coding a simple counter application with BLoC 


This Example show the Number counts in the first page, in the second page 
we are increase the counter number, this will reflect in the fistpage 
For this we are going to create app with below steps 


Create bloc model 
CountBLoC 


class CountBLoC { 


int _count = 0; 
var _countController = StreamController<int>.broadcast () ; 


Stream<int> get stream => _countController.stream; 
int get value => _count; 


addCount() { 
_countController.sink.add(++_count) ; 


} 


dispose() { 
_countController.close(); 

} 

} 





Create Provider 


class BlocProvider extends InheritedWidget{ 
CountBLoC bLoC = CountBLoC () ; 
BlocProvider({Key key, Widget child}) : super(key: key, child: 


@override 
bool updateShouldNotify(InheritedWidget oldWidget) { 


TODO: implement updateShouldNotify 
return true; 


} 


static CountBLoC of(BuildContext context) => 
(context.inheritFromWidgetOfExactType (BlocProvider) as 
BlocProvider) .bLoC; 
} 








Firebase Integration 


Firebase is a mobile and web application development platform developed 
by Firebase. 


Firebase supports frameworks like Flutter on a best-effort basis. 
Now we are going to learn how to setup firebase for Flutter Application 


Firebase Setup 
Step 1: Create a new Project in on_firebase console 


(https://console.firebase.google.com/) 


This will ask to login with gmail. 
Login with your account. 
Now create new project in Firebase console 







XxX Create a project (Step 1 of 3) 


Let's start with a name for 
your project® 





Enter your project name 
Add Firebase to one of your existing Google Cloud Platform projects Learn more [4 


© Maps sample 


©) Maps Sample 





After creating project it will navigates to Console dashboard 


= C Q_ @ consolefirebase.google.com 
Firebase BS 
Receive email updates about new Firebase features, research, and events Sign up 


Develop 


FlutterFirebase Spark plan 


Get started by adding 


Firebase to your app 


= © = ] @ 
Add an app to get starte 


Analytics 
% Extensions 
a 


Upgrade 


7 Store and sync app data in milliseconds 


Now select Android, now it will display below screen 








x Add Firebase to your Android app 


Q Register app 








o 


Add your application package name and register application 


© Register app 


Android 








@ Download config file structions for Android 











¥ Download google-service 
» D.idea 
Dlibs 


Switch to the Project view in Android : C2 MyApplication (Desktop) My 
u Y app 
3 
3 
a > Dsre 
Ñ 
v 


Move the google-services.json file you just 
downloaded into your Android app module root 
directory. 


Studio to see your project root directory. » Ggradle 
» Cobuild 
B .gitignore 


[hk app.iml 
®© build.gradle 












B proguard-rules.pro 
» Ogradie 


ere ea eee) 


EE ca 





Download google-service.json file and this under android->app folder 





Download config file 





© AddFirebase SDK nate e | Unity c 





The Google services plugin for Gradle [ loads the googl 


downloaded. TEED Pisa gradle files to use the plugi 


Project-level build.gradle (<project>/build.gradle) 


services . json file you just 





buildscript { 
repositories { 
Check that you have the following line (if not, add it) 








google() Google's Maven repository 6 
} 
dependencies { 
Add this line 
classpath ‘com.google gms: google-services:4.3.3 A 
} 
} 
allprojects { 
repositories { 
Check that you have the following line (if not, add it) 
google() Google's Maven repository = 
} 
} 
App-level build.gradie (<project>/<app-module>/build_gradle) 
apply plugin: “com.android. application D 
Add this line 


apply plugin: ‘com.google.gms_google-services 


ol 


dependencies { 
add SDKs for desired Firebase products 


firebase.google.com/docs/android up#availadle-libraric 





Modify your build.gradle files to use the plugin project level build.gradle file 


buildscript { 
repositories { 
/! Check that you have the following line (if not, add it): 
google() // Google's Maven repository 


dependencies { 
I... 
/! Add the following line: 
classpath 'com.google.gms:google-services:4.3.3' // Google Services plugin 


} 


allprojects { 
I... 
repositories { 
// Check that you have the following line (if not, add it): 
google() // Google's Maven repository 
I... 
} 
} 





app level build.gradle file 


apply plugin: 'com.google.gms.google-services' 


That's it for Android setup 
iOS Setup 


Copy & Paste your Downloaded GoogleService-Info.plist into projectname/ios/Runner folder 
Open projectname/ios/PODFile (Execute pod install if file not found) & Add ; 


pod 'Firebase/Core; 


and execute pod install 


@ OS  ® Flutter Google Login - Flutt: x | @ Flutter Google Login with: x | €) plugins/packages/google.s x i flutterowl - Authentication x <> Authenticating Your Client x | + 
€ > Œ @ Nittps://console.firebase.google.com/u/0/project/flutterowl-ef059/overview xy BOoOoBse0 x : 


© Download config file 


© Add Firebase SDK Instructions for CocoaPods | Download ZIP C++ 


Google services use CocoaPods [Z to install and manage dependencies. Open a terminal 
window and navigate to the location of the Xcode project for your app. 


Create a Podfile if you don't have one: 


$ pod init BD 
Open your Podfile and add: 
$ pod 'Firebase/Core' D 


Includes Analytics by default @ 


Save the file and run: 


$ pod install B 


This creates an .xcworkspace file for your app. Use this file for all future development on your 
application. 


Previous | nen | 


Q Add initialization code 








GoogleService....plist ^ Show All x 


Open projectname/ios/Runner.xcworkspace & Choose Project & Add File to Runner & Choose 
GoogleService-Info.plist with choose target of Runner 




































































@@@ P BH | <~ Runner) gi iPhone xr Runner: Ready | Today at 4:03 PM as 0 a ® 2 
ma © o 8s & Runner <a> n o 
E ma General Capabilities Resource Tags Info Build Settings Build Phases Build Rules Identity and Type 
Futteg Oper’ in New Tab 20JECT Name | Runner 
a App! Open in New Window b Y Identity 
Runner Location 2 
AppF how in Fi = 
E Fiut) Bacio. it ors Display Name = 
nd Open with External Editor | RE isplay Full Path /Users/codesundar/coding/ 
H Open As > BX fi flutterowl/examples/auth/ 
relel Aa Bie anecter Bundle Identifier com.example.glogin rea 
[}) Gent Version | $(FLUTTER_BUILD_NAME) 
[ig Runner_New File... Project Document 
jld | $(FLUTTER_BUILD_NUMBER) 
nite __Add Files to “Runner”... Fuld |S(FLUTTER BUILD. NUMBER) Project Format | Xcode 3.2-compatible 
Aral Delete Organization | The Chromium Authors ] 
[E mai Tg, Class Prefix | 
lasse New Group Automatically manage signing 
S New Group without Folder Text Settings 
Z Info} New Group from Selection indent Using | Spaces B 
> suet = Sort by Name Ta U B Widths | ne alc 
hi Genf Sort by Type Provisioning Profile Xcode Managed Profile Rel T ma 
Gene a ian 
| i Signing Certificate iOS Developer 
> [il Produ cl Find in Selected Groups... 
| 
| Source Control > Status @ Signing for "Runner" requires a development 
| team. 
| Project Navigator Help Select a development team in the project editor. 
Y Deployment Info 
Deployment Target B 
Devices | Universal B 
Main Interface |Main 
Device Orientation Portrait 
© Upside Down 
Landscape Left 
Landscape Right 
Status Bar Style | Default B 
Filter - 
t +t EB © t © M Hide status bar 4 














@ Xcode File Edit View Find Navigate = 


Editor Product Debug Source Control Window Help 
ee Runner ) i iPhone Xr Runner: Ready | Today at 4:04 PM As 
HRAA& #D P A 
Hf & A = < oy | & B Runner 
w [È Runner p 
v D Flutter Favorites > B android > (B® Flutter È 
mep k Ax Applicati > (i build Podfile 
ramewor! A 
g T OppostonS glogin.im! E Runner 
AppFrameworkinfo.plist E Desktop B ios T 
Flutter framework D iib > B& Runner.xcworkspace 
}) Debug.xeconfig [i Documents EEEE N 


/) Release.xccontig 
À Generated.xccontig 
w M Runner 
h) AppDelegate.h 
m) AppDelegate.m 
©) Main.storyboard 
(i Assets.xcassets 
(©) LaunchScreen.storyboard 
Info.plist 
> I) Supporting Files 
h) GeneratedPluginRegistrant-h 
m) GeneratedPluginRegistrant.m 
> [i Products 





+ |® Ok 











That's it now our application is ready for use Firebase 


Destination: Copy items if needed 


Added folders: Create groups 


Ọ Create folder references 


Add to targets: & < Runner 


New Folder Options 


Y Deployment Info 


Status Bar Style 
+- 6 


Cancel 


ce Main x 


Portrait 

Upside Down 
Landscape Left 
Landscape Right 


Default 


Hide status bar 


p E pose.ipiuy 


Æ 97% ë Mon4:04PM Q = 


a D 
Do 


ntity and Type 


Name Runner 


P Location 
EFES 


Full Path /Users/codesundar/coding/ 
flutterowl/examples/auth/ 
glogin/ios/Runner.xcodeproj © 

{ject Document 

dject Format | Xcode 3.2-compatible 


Drganization The Chromium Authors 


Class Prefix 
it Settings 
indent Using Spaces 2 
Widths as 4° 
Tab Indent 
Wrap lines 


Firebase authentication & Google sign in using Flutter 


Firebase Authentication provides backend services, easy-to-use SDKs, and 
ready-made UI libraries to authenticate users to your app. It supports 
authentication using passwords, phone numbers, popular federated 
identity providers like Google, Facebook and Twitter, and more 


Now we are going to learn how to set up and implementing Google Signin 


using Firebase 


authentication 


Chat Application with Firebase database Flutter 


